/*
学生详情
*/
import {
  DatePicker,
  Space,
  Input,
  Select,
  Table,
  Tag,
  Tabs,
  Button,
} from 'antd';
import { Form } from 'antd';
import React, { useState } from 'react';
import request from '@/http';
import { history } from '@/.umi/core/history';
import All_style from '../../index.less';
import { Link } from 'react-router-dom';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const columns = [
  {
    title: '小组名称',
    dataIndex: 'group_name',
    key: 'group_name',
    // render: text => <a>{text}</a>,
  },
  {
    title: '院系',
    dataIndex: 'collegeName',
    key: 'collegeName',
    //   render: text => <a>{text}</a>,
  },
  {
    title: '专业',
    dataIndex: 'major_name',
    key: 'major_name',
    // render: text => <a>{text}</a>,
  },
  {
    title: '年级',
    dataIndex: 'grade_name',
    key: 'grade_name',
  },
  {
    title: '班级',
    dataIndex: 'class_name',
    key: 'class_name',
  },
  {
    title: '班主任',
    dataIndex: 'headmaster',
    key: 'headmaster',
  },
  {
    title: '学生姓名',
    dataIndex: 'student_name',
    key: 'student_name',
  },
  {
    title: '学号',
    dataIndex: 'student_no',
    key: 'student_no',
  },
  {
    title: '身份证号',
    dataIndex: 'IDnumber',
    key: 'IDnumber',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
  },
  {
    title: '项目角色',
    dataIndex: 'project_role',
    key: 'project_role',
  },
];

const courseEdit = (prop: any) => {
  const [formObject] = Form.useForm();
  let course_id;
  if (prop.location && prop.location.state) {
    course_id = prop.location.state.couseID;
  }
  console.log(course_id);
  // 专业名称下拉框绑定接口
  const [majorName, setmajorName] = React.useState([]);
  const MajorName = async () => {
    const MajorName: any = await request.put('/user_info_manage/getMajorName');
    setmajorName(MajorName.data);
  };
  //   小组名称
  const [groupName, setGroupName] = React.useState([]);
  const TeamName = async () => {
    const TeamName: any = await request.put('/user_info_manage/getTeamName');
    setGroupName(TeamName.data);
  };
  // 学生名字
  const [studentName, setStudentName] = React.useState([]);
  const StudentName = async () => {
    const StudentName: any = await request.put(
      '/user_info_manage/getStudentName',
    );
    setStudentName(StudentName.data);
  };
  // 班级
  const [className, setClassName] = React.useState([]);
  const ClassName = async () => {
    const ClassName: any = await request.put('/user_info_manage/getClassName');
    setClassName(ClassName.data);
  };
  // 年级
  const [gradeName, setGradeName] = React.useState([]);
  const GradeName = async () => {
    const GradeName: any = await request.put('/user_info_manage/getGradeName');
    setGradeName(GradeName.data);
  };
  // 重置按钮
  const onReset = () => {
    formObject.resetFields();
    console.log('重置成功');
  };
  /**
   * 查看课程表
   */
  interface pay {
    current: number;
    pageSize: number;
    total: number;
    onChange: any;
  }
  const onCurrentChange = (page, pageSize) => {
    loadData(page, pageInfo.pageSize);
  };
  const [pageInfo, setPageInfo] = useState<pay>({
    current: 1,
    pageSize: 4,
    total: 0,
    onChange: onCurrentChange,
  });
  const [data, setData] = React.useState();
  const loadData = async (current, pageSize) => {
    const selectForm = await formObject.validateFields(); //获得表单数据
    console.log(selectForm.teacher_name1);
    // 处理日期数据
    const date = selectForm?.date
      ? selectForm?.date?.format('YYYY-MM-DD HH:mm:ss')
      : '';
    const result: any = await request.post('/Course/Query/Students', {
      page: 1,
      number: 10,
      CourseId: course_id, //项目名字
      StudentName: selectForm.student_name,
      TeamName: selectForm.group_name,
      MajorName: selectForm.major_name,
      ClassName: selectForm.class_name,
      GradeName: selectForm.grade_name,
    });
    if (result.success) {
      const newData = result.data.returnDate.map((d, index) => {
        return {
          id: d.id,
          key: `k_${index}`,
          group_name: d.teamName,
          collegeName: d.collegeName,
          grade_name: d.gradeName,
          major_name: d.majorName,
          class_name: d.className,
          student_name: d.studentName,
          IDnumber: d.ststudentIdcard,
          gender: d.studentSex,
          email: d.ststudentEmail,
          project_role: d.ststudentRole,
          student_no: d.studentid,
          headmaster: d.teacherName,
        };
      });
      setPageInfo({
        current: result?.data?.paginationData?.currentPage,
        pageSize: result?.data?.paginationData?.number,
        total: result?.data?.paginationData?.sum,
        onChange: pageInfo.onChange,
      });
      setData(newData);
    }
  };
  // 页面预加载
  React.useEffect(() => {
    MajorName();
    loadData(pageInfo.current, pageInfo.pageSize);
    TeamName();
    StudentName();
    ClassName();
    GradeName();
  }, []);

  console.log(course_id);
  return (
    <div className={All_style.box}>
      <Form form={formObject} preserve={false}>
        <Link to="/Teacher/Course/index">返回</Link>
        <h2>学生详情</h2>
        <Form.Item
          label="学生名称："
          name="student_name"
          style={{ float: 'left' }}
          className={All_style.formItem}
        >
          <Select
            allowClear
            placeholder="请选择"
            className={All_style.select}
            optionFilterProp="children"
            showSearch
          >
            {studentName.map((c, index) => {
              return (
                <Option key={`k_${index}`} value={c}>
                  {c}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          label="小组名称"
          name="group_name"
          style={{ float: 'left' }}
          className={All_style.formItem}
        >
          <Select
            allowClear
            placeholder="请选择"
            className={All_style.select}
            optionFilterProp="children"
            showSearch
          >
            {groupName.map((c, index) => {
              return (
                <Option key={`k_${index}`} value={c}>
                  {c}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          label="专业"
          name="major_name"
          style={{ float: 'left' }}
          className={All_style.formItem}
        >
          <Select
            allowClear
            placeholder="请选择"
            className={All_style.select}
            optionFilterProp="children"
            showSearch
          >
            {majorName.map((c, index) => {
              return (
                <Option key={`k_${index}`} value={c}>
                  {c}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          label="班级"
          name="class_name"
          style={{ float: 'left' }}
          className={All_style.formItem}
        >
          <Select
            allowClear
            placeholder="请选择"
            className={All_style.select}
            optionFilterProp="children"
            showSearch
          >
            {className.map((c, index) => {
              return (
                <Option key={`k_${index}`} value={c}>
                  {c}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          label="年级"
          name="grade_name"
          style={{ float: 'left' }}
          className={All_style.formItem}
        >
          <Select
            allowClear
            placeholder="请选择"
            className={All_style.select}
            optionFilterProp="children"
            showSearch
          >
            {gradeName.map((c, index) => {
              return (
                <Option key={`k_${index}`} value={c}>
                  {c}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          label="学号"
          name="student_no"
          style={{ float: 'left' }}
          className={All_style.formItem}
        >
          <Input
            className={All_style.input}
            allowClear
            placeholder="请输入学号"
          ></Input>
          {/* <Select
              mode='multiple'
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            > */}
          {/* {courseName.map((c, index) => {
                    return (
                      <Option key={`k_${index}`} value={c}>
                        {c}
                      </Option>
                    );
                    
                  })} */}
          {/* </Select> */}
        </Form.Item>
        <div style={{ clear: 'both' }}>
          <Button
            type="primary"
            onClick={() => loadData(pageInfo.current, pageInfo.pageSize)}
            className={All_style.button}
          >
            查询
          </Button>
          <Button
            htmlType="button"
            onClick={onReset}
            className={All_style.button2}
          >
            重置
          </Button>
        </div>
      </Form>
      <Table columns={columns} dataSource={data} className={All_style.table} />
    </div>
  );
};
export default courseEdit;
